<template>
  <el-card class="mt-10">
    <el-form>
      <el-form-item label="SPU名称">
        <el-input placeholder="请输入SPU名称" class="wd-280" />
      </el-form-item>
      <el-form-item label="品牌">
        <el-select>
          <el-option
            v-for="tm in trademarkList"
            :key="tm.id"
            :label="tm.tmName"
            :value="tm.id"
            >{{ tm.tmName }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input placeholder="请输入SPU名称" type="textarea" class="wd-500" />
      </el-form-item>
      <el-form-item label="SPU图片">
        <el-upload
          :action="`/admin/product/fileUpload`"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select>
          <el-option
            v-for="baseSaleAttr in baseSaleAttrList"
            :key="baseSaleAttr.id"
            :label="baseSaleAttr.name"
            :value="baseSaleAttr.id"
            >{{ baseSaleAttr.name }}</el-option
          >
        </el-select>
        <el-button type="primary" icon="el-icon-plus">添加销售属性</el-button>
        <el-table>
          <el-table-column label="序号" type="index" />
          <el-table-column label="属性名" type="index" />
          <el-table-column label="属性值名称列表" type="index" />
          <el-table-column label="操作" type="index" />
        </el-table>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { GetTradeMarkListUrl } from '@/api/product/trademark'
import { GetBaseSaleAttrList } from '@/api/product/spu'
export default {
  name: 'AddSpu',
  data() {
    return {
      SPUName: '',
      trademarkList: [],
      baseSaleAttrList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.getTrademarkList()
    this.getBaseSaleAttrList()
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    async getTrademarkList() {
      const result = await GetTradeMarkListUrl()
      this.trademarkList = result.data
    },
    async getBaseSaleAttrList() {
      const result = await GetBaseSaleAttrList()
      console.log(result)
      this.baseSaleAttrList = result.data
    }
  }
}
</script>

<style lang="less" scoped>
</style>
